<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>deui-range</title>
    <link rel="stylesheet" href="../../css/deui.css">
    <link rel="stylesheet" href="../../css/range/deui-range.css">
</head>

<body>
    <div id="vm">
        <div class="deui-range">
            <!-- step滑动的最小步长 -->
            <input type="range" class="deui-range" max="100" min="1" step="1" id="range" v-model="progressvalue">
            <div class="deui-range-tip" :style="'left:'+progressvalue+'px'">{{progressvalue}}</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../js/vue.2.5.js"></script>
<script src="http://code.jquery.com/jquery-1.4.1.js"></script>
<script>
    var vm = new Vue({
        el: '#vm',
        data: {
            progressvalue: '0',
        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                api.parseTapmode();
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }
            }
        },
        methods: {
            init: function() {
                var _this = this;
            },
        }
    })

    $.fn.RangeSlider = function(cfg) {
        this.sliderCfg = {
            min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
            max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
            step: cfg && Number(cfg.step) ? cfg.step : 1,
            callback: cfg && cfg.callback ? cfg.callback : null
        };
        var $input = $(this);
        var min = this.sliderCfg.min;
        var max = this.sliderCfg.max;
        var step = this.sliderCfg.step;
        var callback = this.sliderCfg.callback;
        $input.attr('min', min)
            .attr('max', max)
            .attr('step', step);
        $input.bind("input", function(e) {
            $input.attr('value', this.value);
            // $input.css('background', 'linear-gradient(to right, #059CFA, #ebeff4 ' + this.value + '%, #ebeff4)');
            $input.css('background-size', this.value + '% 100%');
            if ($.isFunction(callback)) {
                callback(this);
            }
        });
    };
    $('#range').RangeSlider({
        min: 0,
        max: 100,
        step: 1,
        callback: ''
    }); //#snrPollInterval为input的id名
</script>

</html>
